<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.loader {
				position: relative;
				margin: 75px auto;
				width: 150px;
				height: 150px;
				display: block;
				overflow: hidden;
			}
			
			.loader div {
				height: 100%;
			}
			/* loader 1 */
			
			.loader1,
			.loader1 div {
				border-radius: 50%;
				padding: 8px;
				border: 2px solid transparent;
				-webkit-animation: rotate linear 3.5s infinite;
				animation: rotate linear 3.5s infinite;
				border-top-color: red;
				border-bottom-color: green;
			}
			.loader,
			.loader * {
				will-change: transform;
				box-sizing: border-box;
			}
			@-webkit-keyframes rotate {
				0% {
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				50% {
					-webkit-transform: rotate(180deg);
					transform: rotate(180deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
					transform: rotate(361deg);
				}
			}
			
			@keyframes rotate {
				0% {
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				50% {
					-webkit-transform: rotate(180deg);
					transform: rotate(180deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
					transform: rotate(361deg);
				}
			}
			
		</style>
	</head>

	<body>
		<div class='loader loader1'>
			<div>
				<div>
					<div>
						<div>
							<div>
								<div></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>